<template>
  <page-wrap>
    <div class="details-container">
      <div class="details-container-top">
        <div class="details-container-total">
          <div class="details-title">
            <div class="title-left">{{info.perName}} <span class="font-size-14 color-CCCCCC">{{ info.perMobile }}</span></div>
            <div class="title-right">{{ info.groupName }}/{{ info.rankName }}</div>
          </div>
          <div class="details-main">
            <div class="details-main-item table-item">
              <span class="item-left">桌号：</span><span class="item-right">{{ info.roomName }}</span>
            </div>
            <div class="details-main-item">
              <span class="item-left">开台时间：</span><span class="item-right">
                {{ dayjs(info.openTime).format('YYYY-MM-DD') }}
                {{ dayjs(info.openTime).format('HH:mm:ss') }}</span>
            </div>
            <div class="details-main-item">
              <span class="item-left">销售金额：</span><span class="item-right-color">{{ info.realAmt }}</span>
            </div>

            <!-- <div class="details-main-item">
              <span class="item-left">优惠：</span><span class="color-FFFFFF">100元酒水券1张 {{ total.num1 }}</span>
            </div> -->

            <div class="details-main-item">
              <span class="item-left">参与抽成金额：</span><span class="color-FFFFFF"> {{ info.addCommissionAmt }}</span>
            </div>

            <div class="details-main-item">
              <span class="item-left">抽成比例：</span><span class="color-FFFFFF"> {{ formatDecimal(info.commrate * 100)
              }}%</span>
            </div>
            <div class="details-main-item">
              <span class="item-left">抽成金额：</span><span class="color-FFFFFF"> {{ info.commissionAmt }}</span>
            </div>
          </div>
        </div>
        <div class="details-container-total margin-top-20">
          <div class="details-title">
            <div class="title-left">销售信息 </div>
            <div class="title-right2">销售商品: <span class="color-FFAA00">{{ infoListCount }}</span>件</div>
          </div>
          <!-- <div class="details-main">
            <div class="details-main-item">
              <span class="item-left">订台人：</span><span class="item-right">{{ total.people }} {{ total.phone }}</span>
            </div>
            <div class="details-main-item">
              <span class="item-left">客户信息：</span><span class="item-right">{{ total.guest }} {{ total.guestId }}</span>
            </div>
            <div class="details-main-item">
              <span class="item-left">参与抽成金额：</span><span class="item-right-color">{{ total.num1 }}</span>
            </div>
            <div class="details-main-item">
              <span class="item-left">所得抽成金额：</span><span class="item-right-color">{{ total.num1 }}</span>
            </div>
          </div> -->
        </div>
      </div>

      <div class="details-container-main">
        <div class="container-main-item" v-for="(item, index) in infoList" :key="index">
          <div class="item-upper">
            <div class="item-upper-title">{{ item.goodsName }}</div>
            <div class="item-upper-wine">{{ item.goodsTypeName }}</div>
          </div>
          <div class="item-bottom">
            <div>销售金额：<span class="color-FFFFFF">{{ item.salePrice }}</span></div>
            <div>抽成金额：<span class="color-FFFFFF">{{ item.commissionAmt }}</span></div>
          </div>
          <!-- <div class="item-below">
            <div class="item-below-left">
              <span class="span-left">支付方式：</span><span class="span-right">{{ item.method }}</span>
            </div>
            <div class="item-below-right">
              <span class="span-left">合计金额：</span><span class="span-right">{{ item.all }}</span>
            </div>
          </div>
          <div class="item-below">
            <div class="item-below-left">
              <span class="span-left">是否抽成：</span><span class="span-right">{{ item.yes }}</span>
            </div>
            <div class="item-below-right">
              <span class="span-left">抽成比例：</span><span class="span-right">{{ item.proportion }}</span>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </page-wrap>
</template>

<script setup>
import { formatDecimal } from '@/utils/chenhao'
import dayjs from 'dayjs'
import Api from '@/api'
const route = useRoute()

const info = ref({})
info.value = JSON.parse(route.query.info)
console.log('info.value :>> ', info.value);
const infoList = ref([])
const infoListCount = ref(0)
const getDetails = (params) => {
  const data = {
    consumeCodes: info.value.consumeCodes,
    perCode: info.value.perCode
  }
  Api.Common.AppObjProcess.Do({
    functionName: 'GetMartketDetail',
    contentData: data
  }).then(res => {
    console.log('获取详情res :>> ', res);
    infoList.value = res.listData
    infoListCount.value = res.headData.goodsCount
  })
}
getDetails()
// 模拟数据
const total = reactive({
  openTime: 54155116165,
  tabName: 'A001',
  num1: 3251.56,
  people: '赵本诗',
  phone: 13215552153,
  guest: '张益达',
  guestId: 9966,
  num2: 3251.56,
  num3: 325.15
})


// const info = reactive([
//   {
//     name: '托尼斯',
//     wine: '洋酒',
//     method: '会员余额抵扣',
//     all: 1459.0,
//     yes: '是',
//     proportion: '10%'
//   },
//   {
//     name: '飞天茅台',
//     wine: '白酒',
//     method: '会员余额抵扣',
//     all: 2999.0,
//     yes: '是',
//     proportion: '15%'
//   },
//   {
//     name: '百威',
//     wine: '啤酒',
//     method: '会员余额抵扣',
//     all: 325.0,
//     yes: '是',
//     proportion: '8%'
//   },
//   {
//     name: '托尼斯',
//     wine: '洋酒',
//     method: '会员余额抵扣',
//     all: 1459.0,
//     yes: '是',
//     proportion: '10%'
//   }
// ])
</script>

<style scoped lang="scss">
.details-container {
  .details-container-top {
    padding: 0 12px 0px;
    // border-bottom: 1px solid #28282e;

    .details-container-total {
      .details-title {
        padding: 12px 0 12px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        // line-height: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title-left {
          font-weight: bold;
          font-size: 16px;
          color: #FFFFFF;
        }

        .title-right {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 12px;
          color: #CCCCCC;
          padding: 4px 10px;
          background: #222226;
          border-radius: 2px;
        }

        .title-right2 {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 12px;
        }
      }

      .details-main {
        background: #28282e;
        border-radius: 8px;
        padding: 12px 12px 0;

        .details-main-item {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
          line-height: 14px;
          padding-bottom: 12px;

          .item-left {}

          .item-right {
            color: #ffffff;
          }

          .item-right-color {
            color: #ffaa00;
          }
        }

        .table-item {
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 18px;
          color: #FFFFFF;
          margin: 10px 0px;
        }
      }
    }
  }

  .details-container-main {
    padding: 0px 12px 10px;

    .container-main-item {
      background: #28282e;
      border-radius: 8px;
      padding: 16px 12px 0px;
      margin-bottom: 10px;

      .item-upper {
        display: flex;
        align-items: center;
        padding-bottom: 12px;
        border-bottom: 1px solid #383840;
        ;

        .item-upper-title {
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 18px;
          margin-right: 8px;
        }

        .item-upper-wine {
          background: #33312d;
          border-radius: 2px;
          padding: 3px 9px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffcc66;
          line-height: 12px;
        }
      }

      .item-below {
        padding-bottom: 12px;
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;

        line-height: 14px;

        .item-below-left {
          flex-basis: 55%;
        }

        .item-below-right {
          flex-basis: 45%;
        }

        .span-left {
          color: #cccccc;
        }

        .span-right {
          color: #ffffff;
        }
      }

      .item-bottom {
        border-radius: 8px;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #CCCCCC;
        display: flex;
        justify-content: space-between;
        padding: 14px 0px;
      }
    }
  }
}

.font-size-14 {
  font-size: 14px;
}

.color-CCCCCC {
  color: #CCCCCC;
}

.color-FFFFFF {
  color: #FFFFFF;
}

.color-FFAA00 {
  color: #ffaa00;
}

.margin-top-20 {
  margin-top: 20px;
}
</style>
